@charset "utf-8";

body{
	margin: 200px;
}

div{
	/* 兼容版本完整形式 */
	/*-webkit-transform:translateZ(200px);
	-moz-transform:translateZ(200px);
	-o-transform:translateZ(200px);
	-ms-transform:translateZ(200px);
	transform:translateZ(200px);*/
}

div{
	/* 父元素设置 3D 呈现且设置透视距离 */
	/* 一般设置到当前元素的父元素 */
	transform-style: preserve-3d;

	/* 设置查看者的距离位置，一般设置在元素的父元素上 */
	perspective: 1000px;
}
/****************** 移动 ******************/
img{
	/* translate3d(x, y, z)  z 轴可以是负值 */
	/*transform: translate3d(300px,100px,240px);*/

	/* 单独设置 z 轴，z轴可以是负值 */
	/*transform: translateZ(240px);*/
} 
/****************** 缩放 ******************/
img{
	/* scale3d(x,y,z) 3D 缩放，单独设置无效，需要配合角度 */
	/*transform: scale3d(1, 1, 1.5) rotateX(45deg);*/

	/* 单独设置 z 轴，x，y默认为1 */
	/*transform:scaleZ(2) rotateX(45deg);*/
}
/****************** 旋转 ******************/
img{
	/* rotate3d(x,y,z,a) 设置 3D 旋转，a 表示角度，xyz 是0 或1之间的数值 */
	/*transform: rotate3d(1, 0, 0, 45deg);*/

	/* 单独设置旋转 */
	/*transform: rotateX(45deg);
	transform: rotateY(45deg);
	transform: rotateZ(45deg);*/
	/*transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);*/
} 
/****************** 设置源点 ******************/
img{
	/*perspective-origin: top right;*/
}
/* 设置元素的透视 */
img{
	/*transform: perspective(100px) rotateY(45deg);*/
}



